<template>
  <div class="add">
    <el-tabs type="border-card">
      <el-tab-pane
        v-if="$route.query.type == 'DETAIL' && edit == false"
        label="单元详情"
      >
        <el-form
          :model="formDetail"
          :rules="rules"
          ref="formDetail"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="小区名称" prop="communityname">
            <span>{{ formDetail.communityname }}</span>
          </el-form-item>
          <el-form-item label="单元名称" prop="unitname">
            <span>{{ formDetail.unitname }}</span>
          </el-form-item>
          <el-form-item label="栋数" prop="unitnum">
            <span>{{ formDetail.unitnum }}</span>
          </el-form-item>
          <el-form-item label="状态" prop="unitstatus">
            <span>{{ formDetail.unitstatus }}</span>
          </el-form-item>
          <el-form-item label="咨询问候" prop="unitcontext">
            <span v-html="formDetail.unitcontext"></span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="$route.query.type == 'ADD'" label="新增单元">
        <div class="addunit">
          <el-form
            :inline="true"
            :model="addForm"
            :rules="addrules"
            ref="addForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div>
              <el-form-item label="小区名称" prop="communityname">
                <el-input v-model="addForm.communityname"></el-input>
              </el-form-item>
              <el-form-item label="单元名称" prop="unitname">
                <el-input v-model="addForm.unitname"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="栋数" prop="unitnum">
                <el-input v-model="addForm.unitnum"></el-input>
              </el-form-item>
              <el-form-item label="状态选择" prop="unitstatus">
                <el-select
                  v-model="addForm.unitstatus"
                  placeholder="请选择活动区域"
                >
                  <el-option label="已建设" :value="1"></el-option>
                  <el-option label="未建设" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="futext">
              <el-form-item label="咨询问候" prop="">
                <v-md-editor
                  v-model="addForm.unitcontext"
                  width="500px"
                  height="400px"
                ></v-md-editor>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane
        v-if="$route.query.type == 'DETAIL' && edit == true"
        label="编辑单元"
      >
        <div class="addunit">
          <el-form
            :inline="true"
            :model="formDetail"
            :rules="rules"
            ref="formDetail"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div>
              <el-form-item label="小区名称" prop="communityname">
                <el-input v-model="formDetail.communityname"></el-input>
              </el-form-item>
              <el-form-item label="单元名称" prop="unitname">
                <el-input v-model="formDetail.unitname"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="栋数" prop="unitnum">
                <el-input v-model="formDetail.unitnum"></el-input>
              </el-form-item>
              <el-form-item label="状态选择" prop="unitstatus">
                <el-select
                  v-model="formDetail.unitstatus"
                  placeholder="请选择活动区域"
                >
                  <el-option label="已建设" :value="1"></el-option>
                  <el-option label="未建设" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="futext">
              <el-form-item label="咨询问候" prop="">
                <v-md-editor
                  v-model="formDetail.unitcontext"
                  width="500px"
                  height="400px"
                ></v-md-editor>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="btns">
      <el-button v-show="false">默认按钮</el-button>
      <el-button
        type="primary"
        icon="el-icon-caret-left
"
        @click="back"
        >返回</el-button
      >
      <el-button
        icon="el-icon-document"
        type="primary"
        v-if="$route.query.type == 'DETAIL' && edit == false"
        @click="visableEdit"
        >编辑</el-button
      >
      <el-button
        icon="el-icon-document"
        type="primary"
        v-if="
          $route.query.type == 'ADD' ||
          ($route.query.type == 'DETAIL' && edit == true)
        "
        @click="handleSave"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //增加的表单
      text: "", //富文本
      addForm: {
        communityname: "",
        unitname: "",
        unitnum: "",
        unitstatus: "",
        unitcontext: "",
      },
      addrules: {
        communityname: [
          { required: true, message: "小区名称不能为空", trigger: "blur" },
        ],
        unitname: [
          { required: true, message: "单元名称不能为空", trigger: "blur" },
        ],
        unitnum: [{ required: true, message: "栋数不能为空", trigger: "blur" }],
        unitstatus: [
          { required: true, message: "状态不能为空", trigger: "blur" },
        ],
      },
      // 是否编辑
      edit: false,
      //编辑/详情
      formDetail: {},
      rules: {
        communityname: [
          { required: true, message: "小区名称不能为空", trigger: "blur" },
        ],
        unitname: [
          { required: true, message: "单元名称不能为空", trigger: "blur" },
        ],
        unitnum: [{ required: true, message: "栋数不能为空", trigger: "blur" }],
        unitstatus: [
          { required: true, message: "状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //返回
    back() {
      this.$router.go(-1);
    },
    //保存
    handleSave() {
      //新增的保存
      if (this.$route.query.type == "ADD") {
        //确认框
        this.$refs["addForm"].validate((valid) => {
          if (valid) {
            this.$confirm("确认提交信息?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.$message({
                  type: "success",
                  message: "房屋信息添加成功!",
                });
                //点击确定提交信息
                this.$Axios({
                  url: "house/addunitList",
                  method: "POST",
                  data: {
                    communityname: this.addForm.communityname,
                    unitname: this.addForm.unitname,
                    unitnum: this.addForm.unitnum,
                    unitstatus: this.addForm.unitstatus,
                    unitcontext: this.addForm.unitcontext,
                    token: sessionStorage.getItem("token"),
                  },
                  success: (res) => {
                    // console.log(res);
                    this.$router.go(-1);
                  },
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消添加",
                });
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
      if (this.$route.query.type == "DETAIL" && this.edit == true) {
        //编辑的保存
        //确认框
        this.$refs["formDetail"].validate((valid) => {
          if (valid) {
            this.$confirm("确认提交信息?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.$message({
                  type: "success",
                  message: "房屋信息修改成功!",
                });
                //点击确定提交信息
                this.$Axios({
                  url: "house/updateunitList",
                  method: "POST",
                  data: {
                    u_id: this.$route.query.detailId,
                    communityname: this.formDetail.communityname,
                    unitname: this.formDetail.unitname,
                    unitnum: this.formDetail.unitnum,
                    unitstatus: this.formDetail.unitstatus,
                    unitcontext: this.formDetail.unitcontext,
                    token: sessionStorage.getItem("token"),
                  },
                  success: (res) => {
                    console.log(res);
                    this.$router.go(-1);
                  },
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改",
                });
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    //将编辑页面显示出来
    visableEdit() {
      this.edit = true;
    },
    //通过id获取表单数据
    getData() {
      this.$Axios({
        url: "/house/getDetailId",
        method: "get",
        data: {
          id: this.$route.query.detailId,
          token: sessionStorage.getItem("token"),
        },
        success: (res) => {
          //   console.log(res);
          this.formDetail = res[0];
          console.log(this.formDetail, "formDetail");
        },
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.add::v-deep {
  .addunit {
    .el-form {
      .el-form-item {
        .el-form-item__content {
          .el-input {
            width: 500px;
          }
          .el-select {
            width: 500px;
          }
        }
      }
    }
    .futext {
      .el-form-item__content {
        width: 1110px;
      }
    }
  }
  .btns {
    position: fixed;
    top: 150px;
    right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100px;
  }
}
</style>